<template>
  <div>
    <a-button @click="showDrawer">上传文件</a-button>
    <a-drawer
      v-model:visible="visible"
      class="custom-class"
      style="color: red"
      title="文件选择"
      width="1000px"
      placement="right"
      @after-visible-change="afterVisibleChange"
    >
      <div class="twiceBox">
        <ul>
          <li>
            文件名:<input
              type="text"
              v-model="val"
              @input="search"
            />&nbsp;&nbsp;文件类:<input type="text" v-model="FileClass" />
          </li>
        </ul>
        <ol>
          <li>
            <a-button type="primary">搜索</a-button>&nbsp;&nbsp;<a-button
              @click="ReturnBtnSet"
              >重置</a-button
            >
          </li>
        </ol>
      </div>
      <p class="uploadingBox">
        <input type="file" multiple @click="noChange" />
        <button @click="onUpload">上传</button>
      </p>
      <div class="PageStyleBoxImgX">
        <p v-for="(item, idx) in MockArray" :key="idx">
          <a-card  style="width: 240px">
            <template #cover>
              <img alt="example" :src="item.img" />
            </template>
            <a-card-meta :title="item.img">
              <template #description>{{ item.title }}</template>
            </a-card-meta>
          </a-card>
        </p>

        <div
         class="imgBox"
          v-for="item in imgsList"
          :key="item.url"
          hoverable
          style="width: 240px"
        >
          <img :src="item.url" style="width: 240px; height: 240px" alt="" />
          <p style="color:#000;">{{ item.url }}</p>
        </div>
        <a-pagination
          class="Page"
          v-model:current="current"
          :total="this.MockArray.length"
          show-less-items
        />
      </div>
    </a-drawer>
  </div>
</template>

<script>
const OSS = require("ali-oss");

import { defineComponent, ref } from "vue";
import axios from "axios";
export default {
  data() {
    return {
      MockArray: [], //数据
      val: "", //搜索
      FileClass: "", //文件类
      imgsList: [],
      client: new OSS({
        region: "oss-cn-beijing",
        bucket: "devin0831",
        accessKeyId: "LTAI5tF5SC1ZSCHLYiCa6NQh",
        accessKeySecret: "yVRUyZBOy8sXSmmw4rd0j08ZxOOEVN",
      }),
    };
  },
  beforeCreate() {},
  setup() {
    const visible = ref(false);

    const afterVisibleChange = (bool) => {
      console.log("visible", bool);
    };

    const showDrawer = () => {
      visible.value = true;
    };

    return {
      visible,
      afterVisibleChange,
      showDrawer,
    };
  },
  created() {
    this.SetMockFunc(); //数据函数
  },
  methods: {
    noChange(e) {
      const files = e.target.files;
      const imgArr = [];
      for (let file of files) {
        imgArr.push(this.onUpload(file));
      }
      Promise.all(imgArr).then((res) => {
        this.imgsList = res;
      });
      this.imgsList = files;
    },
    async onUpload(file) {
      const imgsData = await this.client.put(
        `${Math.random() * 100}_imgs`,
        file
      );
      return imgsData;
    },
    //重置按钮
    ReturnBtnSet() {
      (this.val = ""), //搜索
        (this.FileClass = ""), //文件类
        this.SetMockFunc();
    },
    //搜索
    async search() {
      let res = await axios.post("/api/SaeRSearch", { val: this.val });
      this.MockArray = res.data.list;
    },

    //数据
    async SetMockFunc() {
      let res = await axios.get("/api/getMock");
      this.MockArray = res.data.data;
    },
  },
  components: {},
};
</script>

<style>
.Page {
  position: absolute;
  bottom: 0px;
}
.imgBox{
    width: 240px;
    height: 340px;
    margin-left: 50px;
    border: 1px solid #ccc;
}
.twiceBox {

  display: flex;
  align-items: center;
  justify-content: space-around;
}
.twiceBox > ul > {
  display: flex;
  width: 500px;
}
.twiceBox > ol > {
  display: flex;
  width: 200px;
}
.PageStyleBoxImgX {
  width: 100%;
  height: 800px;
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  position: absolute;
  top: 243px;
}
.uploadingBox {
  position: absolute;
  right: 100px;
  top: 200px;
}
.PageStyleBoxImgX > p {
  flex-shrink: 0;
  margin-left: 50px;
}
</style>

